<template>
    <!-- 基础题 -->
    <div>
        <input type="button" value="按钮" @click="btn_click()">
        <br>
        <input type="text" placeholder="请输入内容" @input="btn_input()" v-model="inputContent1">
        <br>
        <span>{{ content }}</span>
        <hr>
        <form>
            <input type="text" placeholder="请输入用户名" v-model="userName">
            <input type="password" placeholder="请输入密码" v-model="password">
            <br>
            <input type="button" value="sumbit" @click="btn_check()">
        </form>
        <br>
        <input type="button" value="按钮" @mouseenter="btn_inter()" @mouseleave="btn_leave()" :style="btnStyle">
        <hr>
        <input type="text" v-model="oneContent">
        <input type="button" value="按钮" @click="oneContentClick()">
        <br>
        <span>{{ oneText }}</span>
        <br>
        <textarea v-model="textareaContent"></textarea>
        <input type="button" value="按钮" @click="btn_textClick()">
        <br>
        <span>{{ s1 }}</span>
        <input type="radio" name="sex" v-model="sex1" value="男">男
        <input type="radio" name="sex" v-model="sex1" value="女">女
        <br>
        <input type="button" value="按钮" @click="btn_radioClick()">
        <br>
        <input type="checkbox" value="看电视" v-model="checkBox">看电视
        <input type="checkbox" value="打游戏" v-model="checkBox">打游戏
        <input type="checkbox" value="看球赛" v-model="checkBox">看球赛
        <br>
        <input type="button" value="按钮" @click="btn_checkBox()">
        <br>
        <select name="city" v-model="selectContent">
            <option value="" hidden>请选择城市</option>
            <option value="上海">ShangHai</option>
            <option value="杭州">HangZhou</option>
            <option value="北京">BeiJing</option>
        </select>
        <input type="button" value="按钮" @click="btn_select()">
    </div>
    <hr>
    <!-- 中等题 -->
    <div>
        <form>
            <input type="text" placeholder="请输入用户名">
            <br>
            <input type="password" placeholder="请输入[6-20]位密码" @input="checkPassword()" v-model="uPassword1"
                @keydown.delete="btn_delete()">
            <input type="button" value="提交">
        </form>
    </div>
    <hr>
    <!-- 扩展题 -->
    <div>
        <form>
            <div v-for="item of items">
                <input type="text" v-model="item.content" :placeholder="item.placeholder">
                <br>
            </div>
            <input type="button" value="添加输入框" @click="btn_addInput()">
            <br>
            <input type="button" value="Submit" @click="btn_submit()">
        </form>
        <br>
        <form>
            <input type="text" placeholder="请输入用户名" v-model="uName">
            <br>
            <input type="password" placeholder="请输入密码" v-model="uPassword">
            <br>
            <input type="password" placeholder="确认密码" v-model="uAgainPwd">
            <br>
            <input type="button" value="提交" @click="submit()">
            <input type="button" value="重置" @click="btn_reset()">
        </form>
    </div>

</template>
<script setup>
import { ref, onMounted } from 'vue';
/**
 * 基础题
 */


let oneContent = ref('')
let oneText = ref('')
function oneContentClick() {
    oneText.value = oneContent.value
}

/////////////////////////////////////////

let content = ref('')
let inputContent1 = ref('')
function btn_click() {
    alert('按钮被点击了')
}
function btn_input() {
    content.value = inputContent1.value
}

//////////////////////////////////////

let userName = ref('')
let password = ref('')
let btnStyle = ref({
    backgroundColor: 'pink'
})
function btn_check() {
    if (userName.value === '') {
        alert('用户名不能为空')
        return
    } if (password.value === '') {
        alert('密码不能为空')
        return
    } else {
        alert('登录成功')
    }
}
function btn_inter() {
    btnStyle.value.backgroundColor = 'red'
}
function btn_leave() {
    btnStyle.value.backgroundColor = 'pink'
}

/////////////////////////////////////////////

let textareaContent = ref('')
let s1 = ref('')
function btn_textClick() {
    s1.value = textareaContent.value;
}

//////////////////////////////////////////////

let sex1 = ref('')
function btn_radioClick() {
    alert(sex1.value)
}

///////////////////////////////////////////////

let checkBox = ref([])
function btn_checkBox() {
    alert(checkBox.value)
}


let selectContent = ref('')
function btn_select() {
    alert(selectContent.value)
}


/**
 * 中等题
 */

let uPassword1 = ref('')
let passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{0,20}$/
//  首字母大写的密码强度 强
let strong = /^[A-Z].{0,20}/
//  首字母为英文的密码强度 较强
let litteStrong = /^[a-zA-z].{0,20}/
// 首字母为数字密码的密码强度 弱
let low = /^[0-9].{0,20}/
// 提示用户还需要输入哪些要求
let allowNumber = /[0-9].*$/
let allowLetter = /[a-z].*$/
let allowUpLetter = /[A-Z].*$/

function checkPassword() {
    console.log(uPassword1.value);
    if (passwordRegex.test(uPassword1.value) === false && uPassword1.value.length > 3) {
        alert('请至少包含一个大写字母、一个小写字母和一个数字')
        if (allowLetter.test(uPassword1.value) === false) {
            alert('请输入一个小写字母')
        } else if (allowNumber.test(uPassword1.value) === false) {
            alert('请输入一个数字')
        } else if (allowUpLetter.test(uPassword1.value) === false) {
            alert('请输入一个大写字母')
        }
    }
    if (strong.test(uPassword1.value) && uPassword1.value.length >= 6) {
        alert('强密码')
    }
    if (litteStrong.test(uPassword1.value) && uPassword1.value.length >= 6) {
        alert('较强密码')
    }

    if (low.test(uPassword1.value) && uPassword1.value.length >= 6) {
        alert('弱密码')
    }

}

function btn_delete() {
    uPassword.value = ''
}

/**
 * 扩展题
 */

let inputContent = ref('')
let items = ref([
    {
        value: '',
        placeholder: '输入框1',
        content: inputContent.value
    }
])
function btn_addInput() {
    items.value.push({
        value: '',
        placeholder: `输入框${items.value.length + 1}`,
        content: inputContent.value
    })
}
function btn_submit() {
    let allContent = []
    items.value.forEach(item => {
        allContent.push(item.content)
    })
    alert(`输入框的内容如下:${allContent}`)
}

let uName = ref('')
let uPassword = ref('')
let uAgainPwd = ref('')
function submit() {
    if (uName.value === '') {
        alert('用户名不能为空')
        return
    } else if (uPassword.value === '') {
        alert('密码不能为空')
        return
    } else if (uAgainPwd.value === '') {
        alert('确认密码不能为空')
        return
    } else if (uPassword.value !== uAgainPwd.value) {
        alert('两次密码输入不一致')
    } else {
        alert('提交成功')
        uName.value = ''
        uPassword.value = ''
        uAgainPwd.value = ''
    }
}
function btn_reset() {
    uName.value = ''
    uPassword.value = ''
    uAgainPwd.value = ''
}

</script>